<script setup>
	import { ref } from "vue";
	import {showToast, showDialog} from 'vant'
	import { store } from '@/js/store.js';
	import request from '@/js/request.js';

	defineProps({
		title: String,
	});

	//输入框定位
	function inputfocus(input) {
		input.scrollIntoView(false);
	}

	const souUrl = '/drawer/goods/front';//搜索接口
	const menuUrl = '/drawer/goods/number';//获取主按钮数据
	const drawerUrl = '/drawer/category';//获取全部抽屉数据
	const submitUrl = '/drawer/goods/setgoods';//提交数据

	const cunqu = ref(false)
	const choutiUp = ref(false)

	//统计
	const menuData = ref({
		sumOutside:"7",
		countOutside:2,
		sumInside:"653",
		countInside:12,
		sumDrawer:23,
		countDrawer:30
	})
	const souData = ref({name:'', menu:'sou', categoryId: 5, page: 1});//type 1:全部库存 0:抽屉内
	//搜索出的物品
	const soulist = ref([
		{ id: 1, name: '电钻', stock: 6, unit: '个', type: 0, categoryName: '工具', ids: 1 },
		{ id: 2, name: '螺丝刀', stock: 20, unit: '个', type: 1 },
		{ id: 3, name: '螺丝钉', stock: 6000, unit: '盒', type: 0, categoryName: '杂物', ids: 2 },
		{ id: 4, name: '电烙铁', stock: 12, unit: '个', type: 1 },
		{ id: 5, name: '单片机', stock: 8, unit: '个', type: 1 },
		{ id: 6, name: '订书钉', stock: 500, unit: '盒', type: 0, categoryName: '1-1', ids: 3 },
		{ id: 7, name: '网线 六类', stock: 360, unit: '米', type: 0, categoryName: '2-1', ids: 4 },
		{ id: 8, name: 'A4纸', stock: 12, unit: '包', type: 1 },
	]);
	// 选中的物品
	const wupinData = ref({
		type:"",//out in
		operator: "",
		goods:[]
	});
	// 抽屉数据
	const choutiData = ref({
		code:200,
		chouti:{},//选中的抽屉
		rows:[
			{id:1,name:'1-1'},
			{id:2,name:'1-2'},
			{id:6,name:'工具'},
		]
	})
	//搜索
	function onsouch() {
		request({
			method: 'get',
			url: souUrl,
			params: souData.value,
		}).then(res => {
			var result = res.data;
			console.log("🚀 ~ onsouch ~ result:", result)
			if(result.code == 200){
				soulist.value = result.data;
			}
		}).catch(err => {
			const res = err.response;
			console.log("搜索失败！" + (res&&res.status));
			showToast('搜索失败！' + (res&&res.status))
		})
	}
	//获取主按钮数据
	request({
		method: 'get',
		url: menuUrl,
	}).then(res => {
		var result = res.data;
		console.log("🚀 ~ result:", result)
		menuData.value = result;
	}).catch(err => {
		const res = err.response;
		console.log("读取数目失败！" + (res&&res.status));
	})
	//获取全部抽屉数据
	request({
		method: 'get',
		url: drawerUrl,
	}).then(res => {
		var result = res.data;
		if (result.length > 0) {
			choutiData.value.rows = result;
		}else{
			choutiData.value.code = 0;
		}
	}).catch(err => {
		const res = err.response;
		choutiData.value.code = 0;
		console.log("读取抽屉失败！" + (res&&res.status));
	})

	function kucun() {
		soulist.value=[];//清理搜索结果
		souData.value.name='';
		wupinData.value = {
			type: "",
			operator: "",
			goods: []
		}
		souData.value.menu = 'sou';
		souData.value.page = 1;
		delete souData.value.categoryId;
		cunqu.value = !cunqu.value;
	}
	function chouti() {
		choutiData.value.chouti={}
		choutiUp.value = !choutiUp.value;
	}
	function onchouti(params) {
		soulist.value=[];//清理搜索结果
		souData.value.name='';
		wupinData.value = {
			type: "",
			operator: "",
			goods: []
		}
		choutiData.value.chouti = params;
		souData.value.menu = 'chouti';
		souData.value.categoryId = params.id;
		delete souData.value.page;
		cunqu.value = true;
		//检索抽屉内的物品
		onsouch();
	}
	//添加物品
	function addwupin(params) {
		if(wupinData.value.goods.findIndex((item) => item.id == params.id) == -1){
			var obj = JSON.parse(JSON.stringify(params))
			obj.number = 1;
			obj.goods_id = obj.id;
			wupinData.value.goods.push(obj);
		}
	}
	//删除物品
	function delwupin(index) {
		wupinData.value.goods.splice(index, 1);
	}

	const uppic = ref({show:false,pic:[]})
	function showPic(pic) {
		uppic.value.pic = pic;
		uppic.value.show = true;
	}

	//*提交数据
	var submit_state = false;
	function onSubmit(params) {
		if(submit_state){
			return;
		}
		if (!wupinData.value.operator) {
			showDialog({
				message: '请填写操作人！',
				theme: 'round-button',
			})
			return;
		}
		if (wupinData.value.goods.length == 0) {
			showDialog({
				message: '请选择操作物品！',
				theme: 'round-button',
			})
			return;
		}
		submit_state=true;
		wupinData.value.type = params;
		request({
			method: 'post',
			url: submitUrl,
			data: wupinData.value,
			// verify: true,//验证用户token
		}).then(res => {
			var result = res.data;
			console.log("🚀 ~ onSubmit ~ result:", result)
			if (result.code == 200) {
				wupinData.value.goods = [];
				onsouch();
				showDialog({
					message: result.message||'提交成功',
				})
			}else{
				showDialog({
					message: result.message||'无法提交！',
				})
			}
			submit_state=false;
		}).catch(err => {
			submit_state=false;
			const res = err.response;
			showDialog({
				message: "提交错误！" + (res&&res.status),
				theme: 'round-button',
			})
		})
	}


</script>

<template>
	<div class="box">
		<div class="mainbox flexrow justify-around align-center">
			<h1>{{title}}</h1>
			<div class="e-card playing" @click="kucun">
				<div class="image"></div>

				<div class="wave"></div>
				<div class="wave"></div>
				<div class="wave"></div>


				<div class="infotop">
					<img src="/images/ico-kucun.svg">
					<br>检索物品
					<br>
					<div class="name">共 <i>{{menuData.sumOutside}}</i>件 / <i>{{menuData.countOutside}}</i>大类</div>
				</div>
			</div>
			<div class="e-card playing" @click="chouti">
				<div class="image"></div>

				<div class="wave"></div>
				<div class="wave"></div>
				<div class="wave"></div>


				<div class="infotop">
					<img src="/images/ico-chouti.svg">
					<br>抽屉清单
					<br>
					<div class="name">共 <i>{{menuData.sumInside}}</i>件 / <i>{{menuData.countInside}}</i>大类</div>
					<div class="name">抽屉使用情况：<b>{{menuData.sumDrawer}}/{{menuData.countDrawer}}</b></div>
				</div>
			</div>
		</div>

		<!-- 选择抽屉 -->
		<van-popup v-model:show="choutiUp" closeable position="top" :style="{ height: '100%' }">
			<div class="flexrow justify-center" style="margin: 20px auto;">
				<h2 style="width: 100%;text-align: center;">选择抽屉</h2>
				<div v-for="item in choutiData.rows" class="flexrow" style="margin: 10px;">
					<van-button type="success" :plain="choutiData.chouti.id==item.id?false:true" @click="onchouti(item)" >{{item.name}}</van-button>
				</div>
				<div class="rowmax"></div>
				<div v-if="choutiData.code!=200">获取抽屉数据失败！</div>
			</div>
		</van-popup>

		<!-- 检索窗口 -->
		<van-popup v-model:show="cunqu" closeable position="bottom" :style="{ height: '100%' }">
			<div class="flexrow justify-around align-center" style="margin: 30px auto 0;width: 80%;">
				<h2 style="width: 100%;text-align: center;">{{souData.menu=='sou'?'检索物品':'抽屉：'+choutiData.chouti.name}}</h2>
				<div class="input-so input-container">
					<input type="search" name="text" class="input" placeholder="物品名..." v-model="souData.name" @change="onsouch" @focus="inputfocus($event.target)" />
					<span class="icon" @click="onsouch">
					  <img src="/images/ico-search.svg" style="height: 24px;">
					</span>
				</div>
				<div class="rowmax"></div>
				<div class="flexrow row-start" style="margin: 10px auto;">
					<div class="wupintxt cardbox transition" v-for="item in soulist">
						<div @click="addwupin(item)">
							{{item.name}} <i>[ <b>{{item.stock}}</b>{{item.unit}} ]</i><br><span v-if="item.type==0" class="ico">{{item.categoryName}}</span>
							<img v-if="item.pictures&&item.pictures.length>0" :src="store.www+item.pictures[0].path">
						</div>
						<div class="picbtn" v-if="item.pictures&&item.pictures.length>0" @click="showPic(item.pictures)">查看</div>
					</div>
					<div class="flex1"></div>
					<div v-if="soulist.length==0">未检索到物品！</div>
				</div>
				<div class="rowmax"></div>
				<h2 style="margin: 10px auto;">操作</h2>
				<div class="flexrow" style="width: 100%;">
					<div v-for="(item,index) in wupinData.goods" class="flexrow" style="margin: 10px;">
						<van-button type="primary" color="#79778f" @click="delwupin(index)">{{item.name}} <span v-if="item.type==0" class="wupinico">{{item.categoryName}}</span> <span style="color: yellow">X</span></van-button>
						<input type="text" v-model="item.number" @focus="inputfocus($event.target)" style="width: 66px;padding-left: 10px;">{{item.unit}}
					</div>
					<div class="flex1"></div>
				</div>
				<div class="rowmax"></div>
				<input type="text" v-model="wupinData.operator" @focus="inputfocus($event.target)" placeholder="操作人员" class="shadow" style="width: 200px;margin: 20px auto;">
				<hr class="rowmax">
				<div style="width: 1px"></div>
				<button type="button" class="submitbtn lingbtn" @click="onSubmit('out')">领取</button>
				<button type="button" class="submitbtn" @click="onSubmit('in')">存入</button>
				<div style="width: 1px"></div>
				<div class="rowmax" style="height: 98px"></div>
			</div>
		</van-popup>

		<van-popup v-model:show="uppic.show" :style="{ padding: '10px', width: '80%', height: '70%' }">
			<van-swipe :autoplay="3000" lazy-render :style="{ width: '100%', height: '100%' }">
				<van-swipe-item v-for="image in uppic.pic" :key="image">
				  <img :src="store.www+image.path" style="width: 100%; max-height: 100%" />
				</van-swipe-item>
			</van-swipe>
		</van-popup>
	</div>
</template>

<style scoped>
	.box {
		height: 100%;
	}

	.mainbox {
		height: 100%;
		width: 90%;
		margin: 0 auto;
	}

	.e-card {
		margin: 30px auto;
		background: transparent;
		box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
		position: relative;
		width: 240px;
		height: 330px;
		border-radius: 16px;
		overflow: hidden;
	}

	.e-card .wave {
		position: absolute;
		width: 540px;
		height: 700px;
		opacity: 0.6;
		left: 0;
		top: 0;
		margin-left: -50%;
		margin-top: -70%;
		background: linear-gradient(744deg, #af40ff, #5b42f3 60%, #00ddeb);
	}

	.e-card .icon {
		width: 3em;
		margin-top: -1em;
		padding-bottom: 1em;
	}

	.e-card .infotop {
		text-align: center;
		font-size: 24px;
		position: absolute;
		top: 3.2em;
		left: 0;
		right: 0;
		color: rgb(255, 255, 255);
		font-weight: 600;
	}

	.e-card .name {
		font-size: 16px;
		font-weight: 100;
		position: relative;
		top: 1em;
		text-transform: lowercase;
	}

	.wave:nth-child(2),
	.wave:nth-child(3) {
		top: 210px;
	}

	.playing .wave {
		border-radius: 40%;
		animation: wave 55s infinite linear;
	}
	.playing .wave:nth-child(2) {
		animation-duration: 30s;
	}
	.playing .wave:nth-child(3) {
		animation-duration: 18s;
	}

	@keyframes wave {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.e-card b,
	.e-card i {
		font-size: 20px;
		font-style: normal;
		color: yellow;
	}

	.e-card img {
		height: 70px;
		margin: 10px auto;
	}

	h1 {
		width: 100%;
		margin: 1em auto;
		text-align: center;
	}
	.wupintxt{
		text-align: center;margin: 10px;position: relative;
	}
	.wupintxt .ico,.wupinico{font-size: 0.8em; padding: 0.1em 0.3em;margin:0.3em 0; background-color: #b43b16;color: white;}
	.wupintxt img{display: block;width: 150px;max-height: 100px;}
	.wupintxt span{color: #666;display: block;}
	.wupintxt i{font-size: 0.8em;}
	.wupintxt b{color: #090d2e;}
	.wupintxt .picbtn{
		position: absolute;right: 0.5em;bottom: 0.5em;font-size: 0.8em;
		background-color: rgba(14, 78, 121, 0.6);padding: 0.8em;color: white;border-radius: 0.4em;
	}
	
</style>
<style>
	:root:root {
		--van-popup-close-icon-color: #ff0046;
		--van-popup-close-icon-size: 32px;
	}
</style>